<template>
	<a-layout id="components-layout-demo-fixed" style="position: relative">
		<a-layout-header class="header flex flex-align-center flex-pack-justify">
			<div class="logo flex">
				<router-link to="/home"
					><img src="@/assets/logo.png" class="logo-img" alt="logo" /><span class="sys-name">{{
						title
					}}</span></router-link
				>
				<div class="mod-name">
					<!-- <a-icon type="pic-left" /> -->
					<img src="/img/module.png" />
					<span>{{ selectRoute ? selectRoute.meta.title : '首页' }}</span>
				</div>
			</div>
			<div>
				<!-- <ul class="navs">
					<li @click="changeTabs(item)" :class="{ 'active': secondselectKey == item.name }" v-for="(item,index) in secondMenus" :key="index">
						
						<router-link :to="item.path" active-class="active" >{{item.meta.title}}</router-link>
						
					</li>
				</ul> -->
			</div>
			<div class="right-pro flex">
				<div class="re-home">
					<!-- <a-icon type="home" /> -->
					<img src="/img/re-home.png" />
					<span>返回首页</span>
				</div>

				<div class="userInfo">
					<a-dropdown class="ml50" placement="bottomRight">
						<a href="javascript:;">
							<img src="/img/avatar.png" class="avatar" />
							<span class="username">{{ userInfo.realName }}<a-icon type="down" /></span>
						</a>
						<a-menu slot="overlay" class="user-dropdown-menu-wrapper">
							<a-menu-item key="1">
								<router-link to="/userinfo"><span>个人信息</span></router-link>
							</a-menu-item>
							<a-menu-divider />
							<a-menu-item key="4">
								<a href="javascript:;" @click="handleLogout()"><span>退出登录</span></a>
							</a-menu-item>
						</a-menu>
					</a-dropdown>
				</div>
			</div>
		</a-layout-header>
		<a-layout-content style="position: absolute; top: 60px; left: 0; right: 0; bottom: 0">
			<div class="flex flex-v pro-grid-content flex-1" style="background-color: #f6f8fb">
				<div style="overflow: auto; height: calc(100vh - 60px); overflow: auto; padding-bottom: 35px">
					<div class="mainWidth" style="margin: 0 auto; transition: all 0.2s ease 0s">
						<router-view />
					</div>
				</div>
			</div>
		</a-layout-content>
	</a-layout>
</template>

<script>
import { i18nRender } from '@/locales';
import { mapState, mapActions } from 'vuex';
import defaultSettings from '@/config/defaultSettings';
import RouteView from './RouteView';
export default {
	name: 'MainLayout',
	components: {
		RouteView,
	},
	data() {
		return {
			// preview.pro.antdv.com only use.
			isProPreviewSite: process.env.VUE_APP_PREVIEW === 'true' && process.env.NODE_ENV !== 'development',
			// end
			isDev: process.env.NODE_ENV === 'development' || process.env.VUE_APP_PREVIEW === 'true',

			// base
			menus: [],
			title: defaultSettings.title,
			mixTopMenu: [],
			// userInfo: {},
			fileUrl: process.env.VUE_APP_FILE_API,
			secondMenus: [], //二级菜单
			secondselectKey: '',
			thirdMenus: [], //三级菜单
			thirdselectKey: '',
			selectRoute: {},
		};
	},
	computed: {
		...mapState({
			// 动态主路由
			mainMenu: (state) => state.permission.routers,
			activePage: (state) => state.activePage,
			userInfo: (state) => state.user.userinfo || {},
		}),
	},
	watch: {
		activePage: {
			handler(newval, oldval) {
				console.log('当前菜单' + JSON.stringify(this.activePage));

				//this.selectRoute=this.mixTopMenu.filter(item=>item.name==this.activePage)[0];
				console.log('main当前路由' + JSON.stringify(this.selectRoute));

				console.log('模块菜单' + JSON.stringify(this.mixTopMenu));
				let secondMenus = this.activePage
					? this.mixTopMenu.filter((item) => item.name == this.activePage)[0].children
					: [];

				//二级菜单
				this.secondMenus = secondMenus.filter((item) => !item.hidden);
				console.log('secondMenus模块菜单' + JSON.stringify(this.secondMenus));
				//三级菜单
				if (this.secondMenus && this.secondMenus.length > 0) {
					this.secondselectKey = this.secondMenus[0].name;
					let thirdMenus =
						this.secondMenus.filter((item) => item.name == this.secondselectKey)[0].children || [];
					this.thirdMenus = [...thirdMenus]; //三级菜单
					console.log('三级菜单' + JSON.stringify(this.thirdMenus));
					if (this.thirdMenus && this.thirdMenus.length > 0) {
						this.thirdselectKey = this.thirdMenus[0].name;
					} else {
						this.thirdMenus = [];
						this.thirdselectKey = '';
					}
				} else {
					this.secondselectKey = '';
					this.secondMenus = [];
					this.thirdMenus = [];
					this.thirdselectKey = '';
				}

				// secondMenus:[],//二级菜单
				// thirdMenus:[],//三级菜单
				if (newval != oldval) {
					this.changTab(this.activePage);
				}
			},
			immediate: true, //初始化时让handler调用一下
			deep: true, // 开启深度监听
		},
	},
	created() {
		this.getAllMenu();
		this.getUserInfo();
	},
	mounted() {},
	methods: {
		...mapActions(['Logout', 'GetInfo']),
		i18nRender,
		//获取所有菜单
		getAllMenu() {
			/* 获取路由 */
			this.menus = [...this.mainMenu];
			this.mixTopMenu = this.mainMenu.filter((item) => !item.hidden && item.meta.title != '首页');
			this.selectRoute = this.$ls.get('selectModule');
			/* 如果没有菜单。提示账户没有权限 */
			if (this.menus.length == 0) {
				this.$message.error('你还没有分配权限，请联系管理员');
			}
		},
		getUserInfo() {
			this.$postAction(this.$api.getUserInfo).then((da) => {
				let data = da.data;
				this.$ls.set('userInfo', data);
				this.GetInfo(data);
			});
		},
		//布局为mixmenu时才有的头部菜单tab切换
		changTab(value) {
			this.selectkey = value;
			this.mixTopMenu.forEach((item, index) => {
				if (this.selectkey == item.name) {
					this.menus = item.children;
				}
			});
			// localStorage.setItem('selectkey', value);
		},
		//切换二级菜单
		changeTabs(item) {
			this.secondselectKey = item.name;
			//三级菜单
			if (this.secondMenus && this.secondMenus.length > 0) {
				let thirdMenus = this.secondMenus.filter((item) => item.name == this.secondselectKey)[0].children || [];
				console.log('三级菜单' + JSON.stringify(thirdMenus));
				this.thirdMenus = [...thirdMenus]; //三级菜单

				if (this.thirdMenus && this.thirdMenus.length > 0) {
					this.thirdselectKey = this.thirdMenus[0].name;
				} else {
					this.thirdselectKey = '';
				}
			} else {
				this.secondselectKey = '';
				this.secondMenus = [];
				this.thirdMenus = [];
				this.thirdselectKey = '';
				console.log('dddd三级菜单' + JSON.stringify(this.thirdMenus));
			}
		},
		//退出
		handleLogout() {
			let $me = this;
			this.$confirm({
				title: '你确定要退出吗？',
				content: '',
				okText: '确定',
				cancelText: '取消',
				class: 'confirmbox',
				okType: 'danger',
				onOk() {
					/* 退出，清空token就可以 */
					$me.Logout().then(() => {
						// $me.$router.push({
						// 	path: '/user/login'
						// });
						/* 刷新页面，清除tore */
						window.location.reload();
					});
				},
				onCancel() {
					console.log('Cancel');
				},
			});
		},
		navTo() {
			this.$router.push({
				path: '/userinfo',
			});
		},
	},
};
</script>
<style scoped lang="less">
/deep/.left-menu {
	width: 160px;
	display: inline-block;
	margin: 15px 0;
	overflow: auto;
	ul {
		width: 125px;
		background-color: #fff;
		border-radius: 8px;
		margin-left: 21px;
		padding: 23px 0;
		box-shadow: 0px 4px 8px rgba(19, 29, 53, 0.02);
		li {
			display: inline-block;
			width: 100%;
			text-align: center;
			a {
				display: inline-block;
				color: #2e2424;
				font-size: 16px;
				width: 75px;
				height: 36px;
				line-height: 36px;
				border-radius: 4px;
			}
			a.active {
				background-color: @primary-color;
				color: #fff;
			}
			& + li {
				margin-top: 10px;
			}
		}
	}
}
/deep/.ant-layout {
	background: transparent !important;
}
.mainWidth {
	width: 1440px;
	//margin: 0 auto;
}
.header {
	position: fixed;
	z-index: 999;
	width: 100%;
	background: #00bec5;
	padding: 0 25px;
	-webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	ul.navs {
		margin: 0 auto;
		max-width: 1440px;
		height: 60px;
		text-align: center;
		padding-left: 0;
		li {
			float: left;
			display: inline-block;
			height: 100%;
			line-height: 60px;
			text-decoration: none;
			/* border-bottom: 3px solid transparent; */
			color: #fffs;
			a {
				display: inline-block;
				height: 100%;
				line-height: 60px;
				padding: 0 20px 0 20px;
				text-decoration: none;
				font-size: 18px;
				// border-bottom: 3px solid transparent;
				color: #fff;
			}
		}
		li a.active {
			background: #01a8ae;
			color: #fff;
		}
	}
}

.head-menu {
	// width: 800px;
	text-align: center;
	margin: 0 auto;
	line-height: 64px;
}

.right-pro {
	.re-home {
		color: #fff;
		// margin-left: 88px;
		cursor: pointer;
		i {
			font-size: 24px;
			vertical-align: -0.22em;
		}
		img {
			width: 26px;
			height: 23px;
			margin-top: -3px;
		}
		span {
			margin-left: 7px;
			font-size: 18px;
		}
	}
	/deep/.userInfo {
		.avatar {
			width: 28px !important;
			height: 28px !important;
			border-radius: 50%;
			// background: #fff;
			border: 1px solid @primary-color;
			cursor: pointer;
			i {
				color: @primary-color;
			}
			&.bg {
				//background: url('../assets/images/home/touxiang.jpg') center center no-repeat;
				background-size: 100% auto;
			}
		}
		.username {
			color: #fff;
			margin-left: 10px;
		}
	}
}

/deep/.logo {
	.logo-img {
		height: 36px;
		width: 44px;
	}
	.sys-name {
		color: #fff;
		font-size: 18px;
		margin-left: 7px;
	}
	.mod-name {
		color: #fff;
		margin-left: 88px;
		cursor: pointer;
		i {
			font-size: 24px;
			vertical-align: -0.22em;
		}
		img {
			width: 26px;
			height: 23px;
			margin-top: -3px;
		}
		span {
			margin-left: 7px;
			font-size: 18px;
		}
	}
}
.ml50 {
	margin-left: 50px;
}
/* 底部样式 */
/deep/.ant-layout-footer {
	padding: 0;
}
</style>
